<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值、模糊和形状等。
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" :src="image"></fu-image>
			</view>
		</fu-section>
		
		<fu-section title="自定义形状" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" :src="image" shape="circle"></fu-image>
			</view>
		</fu-section>
		
		<fu-section title="自定义圆角" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" :src="image" radius="10"></fu-image>
			</view>
		</fu-section>
		
		<fu-section title="图片模式(widthFix)" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" :src="image" mode="widthFix"></fu-image>
			</view>
		</fu-section>
		
		<fu-section title="自定义图片加载插槽" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" src="https://picsum.photos/200/300">
					<template v-slot:loading>
						<fu-loading mode="circle" color="#2979ff"></fu-loading>
					</template>
				</fu-image>
			</view>
		</fu-section>
		
		<fu-section title="自定义图片模糊" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" :src="image" dim="5"></fu-image>
			</view>
		</fu-section>
		
		<fu-section title="observer懒加载，滑动到可视范围才会请求图片哟，nvue不生效" customClass="fu-m-t-20" type="line">
			<view class="fu-m-t-20">
				<fu-image width="88" height="88" src="https://picsum.photos/300/300" :observeLazyLoad="true">
					<template v-slot:loading>
						<fu-loading mode="circle" color="#2979ff"></fu-loading>
					</template>
				</fu-image>
			</view>
		</fu-section>
	</view>
</template>

<script setup>
	import { ref } from 'vue';

	// data数据
	const image = ref('https://mp-537f4c84-f806-461e-b77b-937c4698216a.cdn.bspapp.com/素材/头像/打工人.webp')
</script>

<style lang="scss">
	page {
		background-color: $bg-color;
	}
</style>